<!DOCTYPE html>
<html>
<head>
    <title>购物车</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" href="css/common.css" />
    <script src="js/jquery.v1.9.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        .navbar-inverse li a {
            color: #FFF;
        }
    </style>
</head>
<body>
    <!--顶部栏目-->
    <header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" id="header">
        <div class="container">
            <div class="row">
                <div id="backToPrevBtn" class="col-xs-2 text-while">
                    <a class="glyphicon glyphicon-circle-arrow-left" href="#"></a>
                </div>
                <div id="logo" class="col-xs-6 text-while">
                    <span>your logo</span>
                </div>
                <div id="btnUser" class="col-xs-2 text-while">
                    <a class="glyphicon glyphicon-user" href="User.html"></a>
                </div>
                <div id="btnShoppingCart" class="col-xs-2 text-while">
                    <a class="glyphicon glyphicon-shopping-cart" href="ShoppingCart.html"></a>
                </div>
            </div>
        </div>
    </header>
    <!--顶部栏目 END-->
    <!--内容-->
    <div class="wrapper">
        <div class="container">
            <!-- 一个列表中的详细事项 -->
            <div class="list-group" style="margin-top: 20px;">
                <div class="list-group-item hasrowpadding">
                    <h4 class="list-group-item-heading">
                        <input type="checkbox" />
                    </h4>
                    <div class="row">
                        <div class="col-xs-4">
                            <img src="img/1.jpg" class="img-responsive" />
                        </div>
                        <div class="col-xs-8">
                            <p>微购物JackJones杰克琼斯棉质男士休闲水洗牛仔长裤I|213232029</p>
                        </div>
                    </div>
                    <div class="clearfix group-footer">
                        <div class="col-xs-2">
                            <a href="#"><i class="glyphicon glyphicon-trash"></i></a>
                        </div>
                        <div class="col-xs-5">
                            <span>数量：</span>
                            <input type="text" style="height: 20px; width: 40px;" />
                        </div>
                        <div class="col-xs-5">
                            <span>共计：<strong class="text-danger">￥100</strong></span>
                        </div>
                    </div>
                    <!--<div class="row" style="margin: 10px 0;">
                        <a class="btn btn-danger col-xs-6" href="#">删除</a>
                        <div class="col-xs-4">
                            <span>数量</span>
                            <input type="text" style="height:20px;width:40px;" />
                        </div>
                        <div class="col-xs-2">
                            <span>共计：<strong class="text-danger">￥100</strong></span>
                        </div>
                    </div>-->
                </div>
            </div>
            <!-- 一个列表中的详细事项 end -->
            <!-- 支付方式 -->
            <div class="list-group" style="margin-top: 20px;">
                <div class="list-group-item hasrowpadding">
                    <h4 class="list-group-item-heading">付款方式：在线支付</h4>
                    <div class="row">
                        <div class="col-xs-4">
                            <input type="checkbox" style="vertical-align:-2px;" />
                            <span>全选</span>
                        </div>
                        <div class="col-xs-5">
                            <span>总价<strong class="text-danger">￥500</strong></span>
                        </div>
                        <div class="col-xs-3">
                            <a href="#" class="btn btn-danger">去结算</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 支付方式 end -->
        </div>
    </div>
    <!--内容 END-->

    <!--脚部导航-->
    <footer id="footer">
        <div class="container">
            <div class="row">
                <div class="col-xs-4"><a href="#" class="text-n">户首页页</a></div>
                <div class="col-xs-4"><a href="#">会员中心</a></div>
                <div class="col-xs-4"><a href="#">品牌介绍</a></div>
            </div>
        </div>
    </footer>
    <!--脚部导航 END-->
</body>
</html>
<script>
    $(function () {
        $('#nava a').click(function (e) {
            e.preventDefault()
            $(this).tab('show')
        })
    })
</script>
